<script setup>
import { computed, defineProps } from "vue";
import CardField from "./CardField.vue";
import utils from "./utils.js"

const props = defineProps(["meta", "vm"]);
const { meta, vm } = props;
const cols = meta.cols || 4;
const name = meta.model || "~";
const model = vm.getModelRef(name);

const fields = computed(() => {
  if (meta && meta.items) {
    let items = meta.items.filter(x => {
      return (x.visible == null || x.visible == true)
        && vm.getState(x);
    });
    return items;
  } else {
    return [];
  }
});


</script>

<template>
  <el-row :gutter="3" :key="model.key">
    <card-field v-for="item in fields" :cols="cols" :meta="item" :vm="vm">
      <component :is="utils.fields(item)" :meta="item" :vm="vm" />
    </card-field>
  </el-row>
</template>

<style>
.el-row {
  margin-bottom: 4px;
}

.el-row:last-child {
  margin-bottom: 0;
}

.el-col {
  border-radius: 4px;
  margin-bottom: 4px;
}

.el-col:last-child {
  margin-bottom: 0;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
</style>
